<extend name="Index/index"/>

<block name="register">
    <!-- 登录开始 -->
    <div class="conatiner mt40">
        <div class="clearfix mt40"></div>
        <h1 class="text-center mt40">登录</h1>
        <hr>

        <form action="{{:U('User:loginDo')}}" method="post" class="form-horizontal col-md-6 col-md-offset-3 h4" id="login">

            <div class="form-group">
                <label for="user" class="col-md-3 control-label">用户名</label>
                <div class="col-md-9">
                    <input type="text" name="name" class="form-control" id="user" placeholder="请输入用户名..">
                    <span class="text-info"></span>
                </div>
            </div>

            <div class="form-group">
                <label for="pwd" class="col-md-3 control-label">密码</label>
                <div class="col-md-9">
                    <input type="password" name="pwd" class="form-control" id="pwd" placeholder="请输入密码..">
                    <span class="text-info"></span>
                </div>
            </div>



            <div class="form-group">
                <div class="col-md-9 col-md-offset-3">
                    <div class="pull-left">
                        <input type="text" name="vcode" id="code" class="form-control" placeholder="验证码">
                    </div>
                    <div class="pull-right">
                        <img src="{{:U('User:verify')}}" title="点 我 刷 新" style="cursor:pointer" onclick="this.src=this.src+'?i='+Math.random()" class="pull-right">
                    </div>
                </div>
            </div>


            <div class="form-group">
                <div class="col-md-offset-3 col-md-9">
                    <button type="submit" id="sub" class="btn btn-primary">登了个录</button>
                    <button type="reset" class="btn btn-danger pull-right">清空重填</button>
                </div>
            </div>

        </form>
    </div>
    <!-- 登录结束 -->
    <script>
        $(function(){
            var register = false;
            $("#user").blur(function(){
                var username = $("#user").val();
                var userRegx = /^[a-zA-Z]\w{3,14}$/;
                if(!userRegx.test(username)){
                    $("#user").siblings().html("* 以字母开头,4-15个字符,由数字字母下划线组成");
                    $("#user").siblings().css("color","red");
                    return register = fasle;
                }else{
                    $("#user").siblings().html("");
                    $("#user").siblings().css("color","#31708f");
                    return register = true;
                }
            })
            $("#pwd").blur(function(){
                var pwd = $("#pwd").val();
                var pwdRegx = /^\S{4,20}$/;
                if(!pwdRegx.test(pwd)){
                    $("#pwd").siblings().html("* 由4-20位组成");
                    $("#pwd").siblings().css("color","red");
                    return register = false;
                }else{
                    $("#pwd").siblings().html("");
                    $("#pwd").siblings().css("color","#31708f");
                    return register = true;
                }
            })

            $("#sub").click(function(){
                //如果输入框有空值的,不提交表单
                if($("#user").val() == "" || $("#pwd").val() == ""){
                    return false;
                }
                return register;
            })

        })
    </script>
</block>

